import React from 'react';
import { Home, Settings, BarChart, LibraryBooks } from '@mui/icons-material';

export interface SubMenu {
  id: string;
  label: string;
  path: string;
  icon?: React.ReactElement;
  children?: SubMenu[];
}

export interface MainMenu {
  id: string;
  label: string;
  path: string;
  icon?: React.ReactElement;
  submenus?: SubMenu[];
}

export const menuData: MainMenu[] = [
  {
    id: 'dashboard',
    label: 'Dashboard',
    path: '/dashboard',
    icon: <Home />,
    submenus: [
      {
        id: 'overview',
        label: 'Overview',
        path: '/dashboard',
        icon: <BarChart />,
      },
      {
        id: 'reports',
        label: 'Reports',
        path: '/dashboard/reports',
        icon: <LibraryBooks />,
        children: [
          {
            id: 'sales-reports',
            label: 'Sales Reports',
            path: '/dashboard/reports/sales',
          },
          {
            id: 'customer-reports',
            label: 'Customer Reports',
            path: '/dashboard/reports/customer',
          },
        ],
      },
    ],
  },
  {
    id: 'settings',
    label: 'Settings',
    path: '/settings',
    icon: <Settings />,
    submenus: [
      {
        id: 'profile',
        label: 'Profile',
        path: '/settings/profile',
      },
      {
        id: 'account',
        label: 'Account',
        path: '/settings/account',
      },
    ],
  },
];